<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单的隐藏与显示</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("h2").click(function(){
                let u = this.nextSibling.nextSibling;
                console.log();
                if($(u).css("display") == "none"){
                    $("ul").css("display","none");
                    $(u).css("display","block");
                } else{
                    $(u).css("display","none");
                }
            });
        });
    </script>
</head>
<body>
<!--
    菜单的隐藏与显示
        下面的多个列表同一时间最多只有一个列表是显示状态
        可以全部隐藏
        要求使用一个事件进行实现,可以考虑传递参数
-->
<h2>家用电器</h2>
<ul style="display: none;">
    <li>电视</li>
    <li>空调</li>
    <li>冰箱</li>
</ul>
<h2>电子产品</h2>
<ul style="display: none;">
    <li>手机</li>
    <li>pad</li>
    <li>电子表</li>
</ul>
<h2>健身用品</h2>
<ul style="display: none;">
    <li>跑步机</li>
    <li>杠铃</li>
    <li>呼啦圈</li>
</ul>
<h2>户外用品</h2>
<ul style="display: none;">
    <li>帐篷</li>
    <li>手电</li>
    <li>指南针</li>
</ul>
</body>
</html>